import React from 'react'

// 引入底部导航
import Tabbar from '@/components/common/Tabbar'

const Index = () =>
{
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 设置状态
    const [finished,setFinished] = React.useState(false)
    const [list,setList] = React.useState([])
    const [page,setPage] = React.useState(1)
    const [cate,setCate] = React.useState([])

    const load = async () => {
        setFinished(true)
        getCateData()
    }

    const refresh = async () => {
        setList([])
        
        setPage(1)

        setFinished(false)
        
        return new Promise((resolve) => {
            setTimeout(() => {
                getCateData()
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000);
        })
    }

    const Items = () => {
        return list.map((item,index) => {
            return (
                <li key={index}>
                    <React.$Router.NavLink to={"/category/category/info?cateid=" + item.id}>
                        <img src={item.image_text} alt="" />
                        <p>{item.name}</p>
                        <span>{item.createtime_text}</span>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    const onSearch = () => {
        navigate('/category/category/search')
    }

    const getCateData = async () => {
        let data = {
            page:page
        }

        let result = await React.$Api.CateIndex(data)

        if(result.code === 1)
        {
            let arr = list.concat(result.data.list)

            setList(arr)

            setCate(result.data.CateList)

            setPage(page + 1)
            

            setTimeout(() => {
                setFinished(false)
                
            }, 100)
        }else{
            setFinished(true)
            React.$Vant.Toast.info(result.msg)
            return false
        }

    }

    const Swiper = () => {
        if(cate)
        {
            if(cate.length > 0)
            {
                return (
                    <React.$Vant.Swiper>
                        {cate.map((item,index) => {
                            return (
                                <React.$Vant.Swiper.Item key={index}>
                                    <React.$Router.NavLink to={"/category/category/info?id=" + item.id}>
                                        <img src={item.image_text} alt="" />
                                    </React.$Router.NavLink>
                                </React.$Vant.Swiper.Item>
                            )
                        })}
                    </React.$Vant.Swiper>
                )
            }
        }
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='学术'
                    zIndex="10"
                    leftArrow={<></>}
                    rightText={<React.$Icon.Search fontSize={20} />}
                    onClickRight={onSearch}
                />
            </React.$Vant.Sticky>

            {/* 轮播图 */}
            <div className='banner_shouy'>
                <Swiper />
            </div>

            {/* 文章列表 */}
            <React.$Vant.PullRefresh
                onRefresh={refresh}
            >
                <React.$Vant.List className="catelist" finished={finished} onLoad={load} offset={5}>
                    <div className='lest_xs'>
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>

            <div style={{height:".75rem"}}></div>
            <Tabbar />
        </>
    )
}

export default Index